<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24">
                <topInfo />
            </el-col>
            <el-col :span="16">
                <baseInfo />
            </el-col>
            <el-col :span="8" style="text-align: right;">
                 <div class="approve-box">
                    <h3>审核流程</h3>

                    <div>
                        <el-timeline>
                            <el-timeline-item
                             v-for="(item, index) in activities"
                                :key="index"
                                :icon="item.icon"
                                :type="item.type"
                                :color="item.color"
                                :size="item.size"
                                :timestamp="item.timestamp">
                                <div>
                                    <span> {{item.content}}</span>
                                    <el-tag v-if="item.status == '1'"> 审核中</el-tag>
                                    <el-tag v-if="item.status == '2'" type="success"> 审核通过</el-tag>
                                    <el-tag v-if="item.status == '3'" type="danger"> 审核驳回</el-tag>
                                </div>
                               <div class="remark">{{ item.remark }}</div>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </div>
            </el-col>
        </el-row>
       
    </div>
</template>

<script>
import topInfo from "./../project/components/topInfo"
import baseInfo from "./../project/components/baseInfo"

export default {
    components: {
        baseInfo,
        topInfo
    },
    data() {
        return {
            activities: [{
                content: '发起人   刘天文',
                timestamp: '2018-04-11',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-s-custom'
            }, {
                content: '战队组长 张迪',
                status: '2',
                timestamp: '2018-04-12',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-check'
            }, {
                content: '战队组长 张迪',
                status: '3',
                remark:'驳回原因展示文本',
                timestamp: '2018-04-12',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-close'
            }, {
                content: '运营经理 冯辉',
                status: '1',
                timestamp: '2018-04-13',
                size: 'large',
                icon: 'el-icon-s-check'
            }]
        }
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
    .approve-box{background: #f1f1f1;width: 400px;min-height: 800px;padding: 50px;margin: 80px 30px 30px;text-align: left;display: inline-block;
        h3{font-weight: bold;letter-spacing: 2px;padding: 40px;}
        .remark{font-size: 12px;color: #ff4949;}
    }
</style>
